<script setup lang="ts">

import RecordTable from "./widgets/RecordTable.vue";
import { Record } from "./types";
import { useRecordPage } from "./composables/useRecordPage";
import { ref } from "vue";

const { dataList, isLoading, sorting, pagination, filters, fetch } = useRecordPage()

const activityToEdit = ref<Record | null>(null)
const doShowActivityFormModal = ref(false)

const edit = (activity: Record) => {
}
const onDeleted = async (activity: Record) => {
}
const createNewActivity = () => {
  activityToEdit.value = null
  doShowActivityFormModal.value = true
}
const search = () => {
  fetch();
}

const beforeEditFormModalClose = async (hide: () => unknown) => {
  hide()
}

const onActivitySaved = async (project: Record) => {
  doShowActivityFormModal.value = false
  if ('id' in project) {
    // update
  } else {
    // add
  }
}

</script>

<template>
  <h1 class="page-title">Activity Record</h1>

  <VaCard>
    <VaCardContent>

      <div class="flex flex-col md:flex-row gap-2 mb-2 justify-between">
        <div class="flex flex-col md:flex-row gap-2 justify-start">
          <VaInput v-model="filters.activityId" placeholder="Search">
            <template #prependInner>
              <VaIcon name="search" color="secondary" size="small" />
            </template>
          </VaInput>
          <VaInput v-model="filters.prizeId" placeholder="Search">
            <template #prependInner>
              <VaIcon name="search" color="secondary" size="small" />
            </template>
          </VaInput>
        </div>
      </div>

      <div class="flex flex-col md:flex-row gap-2 mb-2 justify-between">
        <div class="flex flex-col md:flex-row gap-2 justify-start">

        </div>
        <VaButton icon="search" @click="search">search</VaButton>
      </div>

      <RecordTable
        :dataList="dataList"
        :loading="isLoading"
        :sort-by="sorting.sortBy"
        :sorting-order="sorting.sortingOrder"
        :pagination="pagination"
        @edit="edit"
        @delete="onDeleted"
      />
    </VaCardContent>

    <VaModal
      v-slot="{ cancel, ok }"
      v-model="doShowActivityFormModal"
      size="small"
      mobile-fullscreen
      close-button
      stateful
      hide-default-actions
      :before-cancel="beforeEditFormModalClose"
    >
      <h1 v-if="activityToEdit === null" class="va-h5 mb-4">Add project</h1>
      <h1 v-else class="va-h5 mb-4">Edit project</h1>

    </VaModal>
  </VaCard>

</template>

<style scoped lang="scss">

</style>
